<template>
	<view class="panel">
		<view class="test-statistical" v-if="showMock">
			<view class="statistical-box">
				<a-row>
					<a-col :span="12">
						<a-typography-text style="color: #2a91fd;">
							考试系统
						</a-typography-text>
					</a-col>
					<uni-icons @click="showMock=false" class="closeBtnFab" type="clear" size="24" color="#df9076">
					</uni-icons>
				</a-row>
				<a-divider style="margin:0px;"></a-divider>
				<a-row class="ant-card-bordered test-info">
					<a-col :span="24">
						<a-row class="backimg">
							<a-col :span="24">
								<a-typography-title :level="1" class="system-fab">
									联创交规考试系统
								</a-typography-title>
							</a-col>
						</a-row>
						<a-row :gutter="[4,4]" type="flex" justify="center" style="height:1000rpx;margin-top: 12rpx;">
							<a-col :span="24" class="info-panel" v-if="showMockNext==true">
								<table style="width: 100%;border-collapse:collapse;border:1px solid #9D9D9D;">
									<tbody>
										<tr style="border:2px solid #9D9D9D;height: 30px;">
											<td width="120px;" border="0px;">姓名：</td>
											<td>{{info.studentName}}</td>
											<td rowspan="7" width="150px" style="border:2px solid #9D9D9D;"></td>
										</tr>
										<tr style="border:2px solid #9D9D9D;height: 30px;">
											<td>性别：</td>
											<td>男
											</td>
										</tr>
										<tr style="border:2px solid #9D9D9D;height: 30px;">
											<td>出生日期:</td>
											<td>&nbsp;</td>
										</tr>
										<tr style="border:2px solid #9D9D9D;height: 30px;">
											<td>身份证号:</td>
											<td>{{info.idCard}}</td>
										</tr>
										<tr style="border:2px solid #9D9D9D;height: 30px;">
											<td>报考车型:</td>
											<td>{{info.drive.data[0].name}}</td>
										</tr>
										<tr style="border:2px solid #9D9D9D;height: 30px;">
											<td>考试原因:</td>
											<td>&nbsp;</td>
										</tr>
										<tr style="border:2px solid #9D9D9D;height: 30px;">
											<td>月考日期:</td>
											<td></td>
										</tr>
										<tr style="border:2px solid #9D9D9D;height: 30px;">
											<td>考试次数:</td>
											<td colspan="2">&nbsp;</td>
										</tr>
									</tbody>
								</table>
								<a-row justify="center" type="flex">
									<a-col :span="8">
										<a-button block @click="toMock">
											确定
										</a-button>
									</a-col>
									<a-col :span="8">
										<a-button block @click="showMockNext=false,inputCard=false,showMock=true">
											重新登录
										</a-button>
									</a-col>
								</a-row>
							</a-col>
							<a-col :span="11" class="info-panel" v-if="showMockNext==false">
								<div v-show="inputCard==false" class="info-role">
									<a-typography>
										<a-typography-title :level="5">
											考试须知
										</a-typography-title>
										<a-typography-text v-for="(item,index) in messageList">
												{{ item }}<br/>
										</a-typography-text>
									</a-typography>

								</div>


								<!-- 	<view class="userinfo" v-show="inputCard">
									<a-row type="flex" style="width: 100%;" :gutter="[12,12]">
										<a-col :span="24">
											<a-typography-text style="font-size: 36rpx;">
												姓名:{{info.studentName}}
											</a-typography-text>
										</a-col>
										<a-col :span="24">
											<a-typography-text style="font-size: 36rpx;">
												身份证:{{info.idCard}}
											</a-typography-text>
										</a-col>
										<a-col :span="24">
											<uni-forms>
												<uni-forms-item label="证件号码"
													style="font-size: 36rpx!important;color: #000;">
													<uni-easyinput v-model="idCard" type="text"
														style="background-color: #fff;"></uni-easyinput>
												</uni-forms-item>
											</uni-forms>
										</a-col>

										<a-col :span="24">
											<a-typography-text style="font-size: 36rpx;">
												证件类型:{{info.drive.data[0].name}}
											</a-typography-text>
										</a-col>
										<a-col :span="12">
											<a-button block @click="vailIdCard">确定</a-button>
										</a-col>
										<a-col :span="12">
											<a-button block @click="inputCard=false,showMock=true">取消</a-button>
										</a-col>
									</a-row>
								</view> -->
							</a-col>
							<a-col :span="11" class="info-panel" v-if="showMockNext==false">
								<a-row type="flex" justify="center" style="height:100%;align-content: center;"
									v-if="inputCard==false">
									<a-button type="primary" @click="vailIdCard">
										确定
									</a-button>
								</a-row>
								<!-- 			<a-row type="flex" justify="center" style="align-items: center;" v-if="inputCard">
									<a-col :span="6" v-for="(item,index) in [1,2,3,4,5,6,7,8,9,'X','清除','退格']">
										<a-button style="height: 100rpx;" block @click="oninput(item)">
											{{item}}
										</a-button>
									</a-col>

								</a-row> -->

							</a-col>
						</a-row>
					</a-col>
				</a-row>

			</view>
		</view>
		<view class="left-panel">
			<view class="title">
				<a-typography-title :level="3">
					学员信息
				</a-typography-title>
			</view>
			<a-skeleton active :loading="info==null"></a-skeleton>
			<view class="userinfo" v-if="info!=null">
				<a-row type="flex" style="width: 100%;" :gutter="[12,12]">
					<a-col :span="24">姓名:{{info.studentName}}</a-col>
					<a-col :span="24">身份证:{{info.idCard}}</a-col>
					<a-col :span="24">考试车型:{{info.drive.data[0].name}}</a-col>
					<a-col :span="24">考试科目:{{info.subject.data[0].name}}</a-col>
					<a-col :span="24">证件类型:{{info.cert.data[0].name}}</a-col>



					<a-col :span="24" v-if="info.lastTimes">
						<a-typography-text>
							上次考试:<uni-dateformat :date="info.lastTimes.create_time"></uni-dateformat>
						</a-typography-text>
					</a-col>

					<a-col :span="24">
						<a-row>
							<a-col :span="12" v-if="info.lastTimes">
								<a-button @click="hasNext">继续上次</a-button>
							</a-col>
							<a-col :span="12">
								<a-button @click="showMock=true">仿真考试</a-button>
							</a-col>
						</a-row>

					</a-col>
					<a-col :span="24">
						<a-row>
							<a-col :span="12">
								<a-button @click="toMyErrorList">我的错题</a-button>
							</a-col>
							<a-col :span="12">
								<a-button @click="cleanAllErrorList">清空错题</a-button>
							</a-col>
						</a-row>

					</a-col>
				</a-row>
			</view>
		</view>
		<view class="right-panel ant-card-bordered">

			<view class="title">
				<a-typography-title :level="3">
					培训项目
				</a-typography-title>
			</view>

			<view class="subject-info ">
				<a-skeleton active :loading="info==null"></a-skeleton>
				<view class="subject-list" v-if="info!=null">

					<a-row>
						<a-col :span="24" v-for="(item,index) in info.subjectlist.data">
							<a-row :gutter="[12,12]" style="width: 100%;" type="flex" justify="center"
								class="subject-item">
								<a-col :span="6">
									<a-button type="default" block @click="$topage('/pages/exercise/category',
										{category:item.s_id,subjectName:item.name},
										'new')">
										{{item.name}}
									</a-button>
								</a-col>
								<a-col :span="6">
									<a-button type="danger" block @click="$topage('/pages/exercise/testpage',
										{
											id:item.s_id,
											studentName:info.studentName,
											uid:info.uid,
											drive:info.drive.data[0].name,
											subject:info.subject.data[0].name,
											cert:info.cert.data[0].name,
											subjectName:item.name
										},
										'new','testpage','post')">
										学习测试
									</a-button>
								</a-col>

								<a-col :span="6" v-if="item.video_link.length>0">
									<a-button type="primary" block>
										视频学习
									</a-button>
								</a-col>
							</a-row>
							<a-divider style="margin: 0;"></a-divider>
						</a-col>
					</a-row>

				</view>


			</view>
		</view>
	</view>
</template>

<script>
	const formItemLayout = {
		labelCol: {
			span: 4
		},
		wrapperCol: {
			span: 8
		},
	};
	const formTailLayout = {
		labelCol: {
			span: 4
		},
		wrapperCol: {
			span: 8,
			offset: 4
		},
	};

	import {
		mapGetters,
		mapState
	} from "vuex"
	export default {
		data() {
			return {
				messageList: ['1、遵守考场纪律，服从监考人员指挥。',
					'2、进入考场，手机、拷机关机。禁止抽烟，禁止吃零食。',
					'3、未经工作人员允许，考生禁止随意走动。',
					'4、考场内禁止大声喧哗，禁止随意走动。',
					'5、考试中认真答题，不准交头接耳。',
					'6、考生中不准冒名顶替，不准弄虚作假。',
					'7、注意考场卫生，禁止随地吐痰，禁止乱扔纸屑。',
					'8、还户公物及考试设备。'
				],
				formItemLayout,
				formTailLayout,
				info: null,
				showMock: false,
				inputCard: false,
				idCard: '',
				showMockNext: false
			}
		},
		computed: {
			...mapGetters({
				isLogin: 'user/isTokenValid'
			}),
			...mapState('user', ['UserInfo']),
		},
		watch: {
			idCard(nv) {
				console.log(nv)
			}
		},
		onLoad() {
			// setTimeout(this.getUserInfo(),1000)
			if (this.isLogin) {
				this.getUserInfo()
			}
		},
		onShow() {
			if (this.isLogin) {
				this.getUserInfo()
			}
		},
		methods: {
			toMyErrorList() {


				this.$topage('/pages/exercise/testpage', {
						action: 'ERROR_LIST',
						studentName: info.studentName,
						uid: info.uid,
						drive: info.drive.data[0].name,
						subject: info.subject.data[0].name,
						cert: info.cert.data[0].name
					},
					'new', 'testpage', 'post')
			},
			vailIdCard() {
				// if (this.idCard == '' || this.idCard != this.info.idCard) {
				// 	uni.showModal({
				// 		title: '提示',
				// 		content: '身份证错误',
				// 	})
				// } else {
				this.showMockNext = true
				return
				// }
			},
			toMock() {
				uni.setStorageSync('testpage', {
					studentName: this.info.studentName,
					uid: this.info.uid,
					drive: this.info.drive.data[0].name,
					subject: this.info.subject.data[0].name,
					cert: this.info.cert.data[0].name,
					subjectName: '仿真考试',
					gender: this.info.gender
				})

				uni.navigateTo({
					url: `/pages/exercise/mocktest?d=${this.info.drive.data[0].s_id}&s=${this.info.subject.data[0].s_id}`
				})
			},
			oninput(item) {

				if (item == '清除') {
					this.idCard = ''
				} else if (item == '退格') {
					if (this.idCard)

						this.idCard = this.idCard.substr(0, this.idCard.length - 1)
				} else {
					this.idCard += item
				}

			},
			cleanAllErrorList() {
				console.log(this.info)
				uni.showModal({
					title: '警告',
					content: '是否删除所有错题?',
					success: function(confirm) {
						if (confirm) {
							const db = uniCloud.database()
							db.collection('error-qlist')
								.where({
									user_id: db.command.eq(this.info.uid)
								}).remove()
								.then(res => {
									if (res) {
										uni.showToast({
											title: '清理成功!',
											duration: 2000,
											icon: "none"
										})
									}
								}).catch(err => {
									uni.showModal({
										content: err
									})
								})
						}
					}
				})
			},
			cleanLastTestHistory() {
				console.log('shanchu', this.UserInfo)
				db.collection('test-history')
					.where({
						user_id: this.UserInfo.userinfo.uid
					}).remove()
			},
			hasNext() {
				const self = this
				uni.showModal({
					title: '是否取消继续上一次练习?',
					confirmText: "是",
					cancelText: "否",
					success(res) {
						if (res.confirm) {
							self.cleanLastTestHistory()
						} else {
							self.$topage('/pages/exercise/testpage', {
									last: true,
									studentName: self.info.studentName,
									uid: self.info.uid,
									drive: self.info.drive.data[0].name,
									subject: self.info.subject.data[0].name,
									cert: self.info.cert.data[0].name
								},
								'new', 'testpage', 'post')
						}
					}
				})
			},
			getUserInfo() {
				const self = this
				uniCloud.callFunction({
					name: 'uni-id-sign-cf',
					data: {
						'action': 'getTestInfo'
					}
				}).then((res) => {
					console.log(res)
					self.info = res.result
					uni.setStorageSync('info', self.info)
					//	console.log(self.info)

				})
			}

		}
	}
</script>

<style scoped lang="scss">
	@import url('./exercis.css');

	::v-deep .uni-forms-item__label {
		width: 200rpx !important;

		.label-text {
			font-size: 36rpx !important;
			color: #000 !important;
		}
	}
</style>
